<template>
	<view class="container">
		<view class="list">
			<block class="list" v-for="item in roomInfo" :key="item.prodId">
				<navigator
					:url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.roomid + '&custom_params=sign'">
					<view class='item'>
						<view class='more-prod-pic'>
							<image :src='item.feeds_img' class='more-pic' lazy-load mode='widthFix'></image>
							<view>
								<text class="time">开播：{{ item.start_time }}-{{ item.end_time }}</text>
							</view>
							<view>
								<text class="title">{{ item.name }}</text>
							</view>
							<view class="person">
								<text>主播</text>
								<text>{{ item.anchor_name }}</text>
							</view>
						</view>
					</view>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			roomInfo: [],
			total: 0,
		}
	},
	onShow: function () {
		uni.request({
			url: 'https://api.weixin.qq.com/wxa/business/getliveinfo?access_token=' + uni.getStorageSync('singletoken'),
			data: {
				"start": 0,
				"limit": 10
			},
			method: 'POST',
			success: (res) => {
				console.log('直播列表返回值...', res);
				this.roomInfo = [{
					roomid: '8',
					name: '艰难中前行',
					feeds_img: '../../static/songhuiqiao.jpg',
					anchor_name: '家国山河',
					start_time: "2022/12/14",
					end_time: "2022/12/15"
				}, {
					roomid: '7',
					name: '人人皆可高效快乐成才',
					feeds_img: '../../static/2.jpg',
					anchor_name: '家国山河',
					start_time: "2022/12/14",
					end_time: "2022/12/15"
				}, {
					roomid: '6',
					name: '2003A优秀高薪',
					feeds_img: '../../static/mote2.jpg',
					anchor_name: '家国山河',
					start_time: "2022/12/14",
					end_time: "2022/12/15"
				}]
				// if (res.data.data.errcode === 0){

				//         this.roomInfo= res.data.data.room_info.sort((a,b)=>b.roomid-a.roomid).map(item=>{
				//             return {...item, 
				//                 start_time: this.formatTime(item.start_time), 
				//                 end_time: this.formatTime(item.end_time)
				//             }
				//         }),
				//         this.total=res.data.data.total

				// }
			}
		})
	},
	methods: {
		formatTime(str, showDate = true) {
			let date = new Date(str * 1000);
			let month = String(date.getMonth() + 1).padStart(2, '0');
			let day = String(date.getDate()).padStart(2, '0');
			let hour = String(date.getHours()).padStart(2, '0');
			let min = String(date.getMinutes()).padStart(2, '0');


			return showDate ? `${month}-${day} ${hour}:${min}` : `${hour}:${min}`
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: #f4f4f4;
}

.list {
	display: flex;
	flex-wrap: wrap;
}

.item {
	width: 44vw;
	margin-left: 4vw;
	margin-top: 15px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}

image {
	width: 100%;
}

.title {
	font-size: 20px;
	margin: 5px;
}

.time {
	color: #999;
	font-size: 11px;
	margin: 5px;
}

.person {
	margin: 5px;
}

.person text:first-child {
	background: antiquewhite;
	border-radius: 50%;
	width: 10vw;
	height: 10vw;
	display: inline-block;
	font-size: 15px;
	text-align: center;
	line-height: 10vw;
	color: burlywood;
}

.person text:last-child {
	font-size: 18px;
	margin-left: 10px;
	color: black;
}
</style>
